<template>
  <div class="main">
    <div>
      <img :src="require('../assets/login_logo/logo@72.png')" alt="" />
      <span>{{ item.uname }}</span>
    </div>
    <van-button
      @click="changeState"
      :class="{ active: active }"
      style="border-radius: 5px"
      type="warning"
      size="small"
      plain
      >{{ active ? "已关注" : "+关注" }}</van-button
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: true,
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  props: {
    item: { required: true, type: Object },
  },
  methods: {
    changeState() {
      let url = "is_myFocus";
      let params = `focus_id=${this.item.uid}&user_id=${this.userInfo.uid}`;
      this.axios.post(url, params).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.active = false;
        } else if (res.data.code == 201) {
          this.active = true;
        }
      });
    },
  },
};
</script>

<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
}
.main > div {
  display: flex;
  align-items: center;
}
.main > div > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.main > div > span {
  padding: 0 8px;
}
.active {
  border: 1px solid #9fa19f;
  color: #9fa19f;
}
</style>

<style lang="scss" scoped></style>
